<!--

  一个上下结构的数据展示组件

  // 带*号表示必填属性
  props: 
    numberColor:(RGB || HEX || var(...))      数据的字体颜色
    titleColor:(RGB || HEX || var(...))       标题的字体颜色
    number:(String || Number)                 数据
    title:(String)                            标题

  slot: 

  demo: 
    <qm-show-data
        number="14"
        title="待安排"
        numberColor="#19D3AE"
        titleColor="#61677A"
    ></qm-show-data>

-->



<template>
  <div class="qm-show-data">
      <div class="qm-show-data-number" :style="`color: ${numberColor}`">
          {{number}}
      </div>
      <div class="qm-show-data-title" :style="`color: ${titleColor}`">
          {{title}}
      </div>
  </div>
</template>

<script>
export default {
props: {
    numberColor : {
        type: String,
        default: "var(--color-text-title)"
    },
    titleColor : {
        type: String,
        default: "var(--color-text-subtext)"
    },
    number: {
        type: String | Number,
    },
    title: {
        type: String
    }
}
}
</script>

<style lang="less" scoped>
    .qm-show-data{
        max-width: calc(171px * var(--ratio));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &-number{
            font-size: var(--font-size-maintitle);
        }
        &-title{
            margin-top: calc(8px * var(--ratio));
            font-size: var(--font-size-subcontent-2);
        }
    }
</style>
